<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/voidDetails'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="选择员工：">
                        <el-select style="width: 200px" clearable filterable v-model="paging.staff_id" placeholder="请选择">
                            <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="查询时间段：">
                        <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                    <div style="margin-left: 28px">
                        <el-radio-group v-model="radio1" @change="handleCurrentChange(1)">
                            <el-radio-button label="毛坯销售"></el-radio-button>
                            <el-radio-button label="成品销售"></el-radio-button>
                            <el-radio-button label="服务项目"></el-radio-button>
                            <el-radio-button label="洗护用品销售"></el-radio-button>
                            <el-radio-button label="充值"></el-radio-button>
                        </el-radio-group>
                    </div>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float">
                    <el-button style="margin-left:auto;">导出</el-button>
                </div> -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%" border :key="0">
                    <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
                    <el-table-column prop="out_trade_no" label="订单编号" align="center" min-width="130"></el-table-column>
                    <el-table-column prop="cancel_date" label="作废时间" align="center" min-width="130"></el-table-column>
                    <el-table-column prop="cancet_type" label="类型" align="center" min-width="100">
                        <template slot-scope="scope">{{ scope.row.cancet_type == 1 ? '作废' : scope.row.cancet_type == 2 ? '全部退款' : scope.row.cancet_type == 3 ? '部分退款' : '' }}</template>
                    </el-table-column>
                    <el-table-column :prop="radio1 == '充值' ? 'date' : 'bill_date'" label="订单日期" width="100" align="center"></el-table-column>
                    <el-table-column prop="vip_no" label="会员卡号" align="center" min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="realname" label="姓名" align="center" min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="staff_name" label="员工" align="center" min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center" width="110"></el-table-column>
                    <el-table-column prop="project_name" label="项目名称" align="center" v-if="radio1 == '服务项目'" key="1" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="goods_name" label="洗护商品系列" align="center" v-if="radio1 == '洗护用品销售'" key="2" min-width="110" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="price" label="充值金额" align="center" v-if="radio1 == '充值'"></el-table-column>
                    <el-table-column prop="number" label="数量" align="center" v-if="radio1 != '充值'"></el-table-column>
                    <el-table-column prop="orders_payable" label="金额" align="center" v-if="radio1 != '充值'"></el-table-column>
                    <el-table-column prop="advance_amount" label="首付" align="center" v-if="radio1 == '成品销售' || radio1 == '毛坯销售'"></el-table-column>
                    <el-table-column prop="balance_amount" label="尾款" align="center" v-if="radio1 == '成品销售' || radio1 == '毛坯销售'"></el-table-column>
                    <el-table-column prop="ach" label="扣减业绩" align="center"></el-table-column>
                    <el-table-column prop="com" label="扣减提成" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                radio1: '毛坯销售',
                bill_time_start: [],
                loading: false,
                paging: {
                    staff_id: '',
                    page: 1,
                    total: 0,
                    limit: 10,
                },
                tableData: [],
                staffList: [],
            };
        },
        async created() {
            if (this.$route.path == '/voidDetails') {
                this.bill_time_start[0] = this.$moment().startOf('month').format('YYYY-MM-DD');
                this.bill_time_start[1] = this.$moment().endOf('month').format('YYYY-MM-DD');
                await this.getStaff();
                this.handleCurrentChange(1);
            }
        },
        methods: {
            async getStaff() {
                this.loading = true;
                let { code, data } = await this.$Http.getStaff({ is_all: 1, status: 1 });
                this.loading = false;
                if (code) {
                    this.staffList = data;
                }
            },
            async repairGetList() {
                if (!this.bill_time_start) {
                    this.bill_time_start = [];
                }
                this.paging.type = this.radio1 == '服务项目' ? 1 : this.radio1 == '成品销售' ? 2 : this.radio1 == '毛坯销售' ? 3 : this.radio1 == '洗护用品销售' ? 4 : 5;
                this.paging.date_start = this.bill_time_start[0] || '';
                this.paging.date_end = this.bill_time_start[1] || '';
                let obj = Object.assign({}, this.paging);
                this.loading = true;
                let { code, data } = await this.$Http.commissionCancet(obj);
                if (code) {
                    console.log();
                    if (data.length && data[0].id) {
                        this.tableData = data;
                    } else {
                        this.tableData = [];
                    }
                    // this.paging.total = data.total;
                }
                this.loading = false;
            },
            reset() {
                //重置
                this.paging = this.$options.data().paging;
                this.bill_time_start = [];
                this.bill_time_start[0] = this.$moment().startOf('month').format('YYYY-MM-DD');
                this.bill_time_start[1] = this.$moment().endOf('month').format('YYYY-MM-DD');
                this.handleCurrentChange(1);
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.repairGetList();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.repairGetList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .image-thumbnail {
        width: 130px;
        height: 130px;
    }

    .divTable {
        width: 100%;

        div {
            border-bottom: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;

        td {
            border: 1px solid #ebeef5;
            text-align: center;
            height: 32px;
            color: #333333;
            padding: 0 5px;
            font-size: 14px;
        }
    }
</style>
